<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../css/pintuer.css">
    <link rel="stylesheet" href="../../css/admin.css">
    <script src="../../js/jquery.js"></script>
    <script src="../../js/pintuer.js"></script>
    <style>
        img {
            height: 70px;
            width: 70px;
        }
    </style>
</head>

<body>
    <div id="info"></div>
    <form method="post" action="">
        <div class="panel admin-panel">
            <div class="panel-head line">
                <strong class="icon-reorder x4" style="padding-top: 13px"> 用户管理</strong>
                <div class="x4">
                    <form>
                        <select class="input" id="kindwine" name="kindid">
                            <option value="">请选择你需要查询用户</option>
                            <option value="1">会员</option>
                            <option value="0">非会员</option>
                        </select>
                    </form>
                </div>
                <div class="button-group x4">
                    <a style="margin-left: 175px" class="button border-blue-light bg-blue" href="./add.html"
                        id="btn"><span class="icon-edit"></span> 添加</a>
                </div>
            </div>
            <table class="table table-hover text-center">
                <thead>
                    <tr>
                        <th width="120">ID</th>
                        <th>会员</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>卡号</th>
                        <th width="120">余额</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tablebody"></tbody>
                <tr>
                    <td colspan="8">
                        <div class="pagelist">
                            <button class="button border-green" type="button" onclick="upPage()">上一页</button>
                            <span id="pageNum">
                            </span>
                            <button class="button border-green" type="button" onclick="nextPage()">下一页</button>
                            <button class="button border-green" type="button" onclick="pageClick(this)">尾页</button>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>

    <script type="text/javascript">
        var json;
        window.onload = function () {
            listonLoad();

            let result;
            var url = window.location.search; //获取url中"?"符后的字串
            console.log(url)
            if (url.indexOf("?") != -1) {
                result = url.substr(url.indexOf("=") + 1);
                var str =
                    `
             <div class="alert alert-blue">
		<span class="close rotate-hover"></span><strong>提示：</strong>操作成功。</div>
             `
                $('#info').html(str)
                setTimeout(function () {
                    $('#info').html('')
                }, 2000)
            }
        }

        function pageClick(e) {
            var pageNum = document.getElementById('pageNum').children;
            if (e.innerText == "尾页") {
                for (let i = 0; i < pageNum.length; i++) {
                    pageNum[i].setAttribute('class', '');
                }
                pageNum[pageNum.length - 1].setAttribute('class', 'current');
                for (let i = 0; i < pageNum.length; i++) {
                    if (pageNum[i].getAttribute('class') == "current") {
                        var long = json.length - 4 * (i + 1) > 4 ? 4 * (i + 1) + 4 : json.length
                        var info = '';
                        for (let j = 4 * i; j < long; j++) {
                            if (json[j].ismember == 1) {
                                info +=
                                    `
                                 <tr>
                                     <td>${json[j].id}</td>
                                     <td><span class="badge bg-main">VIP会员</span></td>
                                     <td>${json[j].username}</td>
                                     <td>${json[j].pwd}</td>
                                     <td>${json[j].idcard}</td>
                                     <td>￥ ${json[j].balance}</td>
                                     
                                     <td>
                                         <div class="button-group">
                                             <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                     class="icon-edit"></span>修改</a>
                                             <a class="button border-red" href="javascript:void(0)"
                                                 onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                                 删除</a>
                                         </div>
                                     </td>
                                 </tr>
                                 `
                            } else {
                                info +=
                                    `
                                 <tr>
                                     <td>${json[j].id}</td>
                                     <td><span class="badge bg-gray">非会员</span></td>
                                     <td>${json[j].username}</td>
                                     <td>${json[j].pwd}</td>
                                     <td>${json[j].idcard}</td>
                                     <td>￥ ${json[j].balance}</td>
                                     
                                     <td>
                                         <div class="button-group">
                                             <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                     class="icon-edit"></span>修改</a>
                                             <a class="button border-red" href="javascript:void(0)"
                                                 onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                                 删除</a>
                                         </div>
                                     </td>
                                 </tr>
                                 `
                            }
                        }
                        $('#tablebody').html(info);
                        break;
                    }
                }
            } else {
                for (let i = 0; i < pageNum.length; i++) {
                    pageNum[i].setAttribute('class', '');
                }
                e.setAttribute('class', 'current');
                for (let i = 0; i < pageNum.length; i++) {
                    if (pageNum[i].getAttribute('class') == "current") {
                        var k = json.length / 4 == 0 ? parseInt(json.length / 4) : parseInt(json.length / 4) + 1
                        var long = i + 1 == k ? json.length : i * 4 + 4
                        var info = '';
                        for (let j = 4 * i; j < long; j++) {
                            if (json[j].ismember == 1) {
                                info +=
                                    `
                            <tr>
                                <td>${json[j].id}</td>
                                <td><span class="badge bg-main">VIP会员</span></td>
                                <td>${json[j].username}</td>
                                <td>${json[j].pwd}</td>
                                <td>${json[j].idcard}</td>
                                <td>￥ ${json[j].balance}</td>
                                
                                <td>
                                    <div class="button-group">
                                        <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                class="icon-edit"></span>修改</a>
                                        <a class="button border-red" href="javascript:void(0)"
                                            onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                            删除</a>
                                    </div>
                                </td>
                            </tr>
                            `
                            } else {
                                info +=
                                    `
                            <tr>
                                <td>${json[j].id}</td>
                                <td><span class="badge bg-gray">非会员</span></td>
                                <td>${json[j].username}</td>
                                <td>${json[j].pwd}</td>
                                <td>${json[j].idcard}</td>
                                <td>￥ ${json[j].balance}</td>
                                
                                <td>
                                    <div class="button-group">
                                        <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                class="icon-edit"></span>修改</a>
                                        <a class="button border-red" href="javascript:void(0)"
                                            onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                            删除</a>
                                    </div>
                                </td>
                            </tr>
                            `
                            }
                        }
                        $('#tablebody').html(info);
                        break;
                    }
                }
            }
        }

        function nextPage() {
            var pageNum = document.getElementById('pageNum').children;
            for (let i = 0; i < pageNum.length; i++) {
                // alert(pageNum[i].getAttribute('class'))
                if (pageNum[i].getAttribute('class') == "current") {
                    // alert(pageNum[i].getAttribute('class'))
                    if (pageNum[i].nextSibling) {
                        // alert(pageNum[i].getAttribute('class'))
                        pageNum[i].setAttribute('class', '');
                        pageNum[i + 1].setAttribute('class', 'current');
                        var long = json.length - 4 * (i + 1) > 4 ? 4 * (i + 1) + 4 : json.length
                        let info = '';
                        for (let j = 4 * (i + 1); j < long; j++) {
                            if (json[j].ismember == 1) {
                                info +=
                                    `
                            <tr>
                                <td>${json[j].id}</td>
                                <td><span class="badge bg-main">VIP会员</span></td>
                                <td>${json[j].username}</td>
                                <td>${json[j].pwd}</td>
                                <td>${json[j].idcard}</td>
                                <td>￥ ${json[j].balance}</td>
                                
                                <td>
                                    <div class="button-group">
                                        <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                class="icon-edit"></span>修改</a>
                                        <a class="button border-red" href="javascript:void(0)"
                                            onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                            删除</a>
                                    </div>
                                </td>
                            </tr>
                            `
                            } else {
                                info +=
                                    `
                            <tr>
                                <td>${json[j].id}</td>
                                <td><span class="badge bg-gray">非会员</span></td>
                                <td>${json[j].username}</td>
                                <td>${json[j].pwd}</td>
                                <td>${json[j].idcard}</td>
                                <td>￥ ${json[j].balance}</td>
                                
                                <td>
                                    <div class="button-group">
                                        <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                class="icon-edit"></span>修改</a>
                                        <a class="button border-red" href="javascript:void(0)"
                                            onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                            删除</a>
                                    </div>
                                </td>
                            </tr>
                            `
                            }
                        }
                        $('#tablebody').html(info);
                        break;
                    } else {
                        alert('已经是最后一页了！')
                    }
                }
            }
        }

        function upPage() {
            var pageNum = document.getElementById('pageNum').children;
            for (let i = 0; i < pageNum.length; i++) {
                // alert(pageNum[i].getAttribute('class'))
                if (pageNum[i].getAttribute('class') == "current") {
                    // alert(pageNum[i].getAttribute('class'))
                    if (pageNum[i].previousSibling) {
                        // alert(pageNum[i].getAttribute('class'))
                        pageNum[i].setAttribute('class', '');
                        pageNum[i - 1].setAttribute('class', 'current');
                        let info = '';
                        for (let j = 4 * i - 4; j < 4 * i; j++) {
                            if (json[j].ismember == 1) {
                                info +=
                                    `
                             <tr>
                                 <td>${json[j].id}</td>
                                 <td><span class="badge bg-main">VIP会员</span></td>
                                 <td>${json[j].username}</td>
                                 <td>${json[j].pwd}</td>
                                 <td>${json[j].idcard}</td>
                                 <td>￥ ${json[j].balance}</td>
                                 
                                 <td>
                                     <div class="button-group">
                                         <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                 class="icon-edit"></span>修改</a>
                                         <a class="button border-red" href="javascript:void(0)"
                                             onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                             删除</a>
                                     </div>
                                 </td>
                             </tr>
                             `
                            } else {
                                info +=
                                    `
                             <tr>
                                 <td>${json[j].id}</td>
                                 <td><span class="badge bg-gray">非会员</span></td>
                                 <td>${json[j].username}</td>
                                 <td>${json[j].pwd}</td>
                                 <td>${json[j].idcard}</td>
                                 <td>￥ ${json[j].balance}</td>
                                 
                                 <td>
                                     <div class="button-group">
                                         <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                 class="icon-edit"></span>修改</a>
                                         <a class="button border-red" href="javascript:void(0)"
                                             onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                             删除</a>
                                     </div>
                                 </td>
                             </tr>
                             `
                            }
                        }
                        $('#tablebody').html(info);
                        break;
                    } else {
                        alert('已经是第一页了！')
                    }
                }
            }
        }

        function listonLoad() {
            $.ajax({
                url: 'http://localhost:3000/api/user/selectuser',
                dataType: 'jsonp',
                type: 'get',
                data: {},
                success: function (data) {
                    if (data != null) {
                        json = data.result;
                        // var arr = json.data;
                        console.log(json)
                        var pageNum = document.getElementById('pageNum');
                        var code = '';
                        var pageTotal = json.length / 4;
                        for (let i = 0; i < pageTotal; i++) {
                            if (i == 0) {
                                code += `<span class="current" onclick="pageClick(this)">${i + 1}</span>`
                            } else {
                                code += `<span class="" onclick="pageClick(this)">${i + 1}</span>`
                            }
                        }
                        pageNum.innerHTML = code;
                        let info = '';
                        var long = json.length > 4 ? 4 : json.length;
                        for (let j = 0; j < long; j++) {
                            if (json[j].ismember == 1) {
                                info +=
                                    `
                                 <tr>
                                     <td>${json[j].id}</td>
                                     <td><span class="badge bg-main">VIP会员</span></td>
                                     <td>${json[j].username}</td>
                                     <td>${json[j].pwd}</td>
                                     <td>${json[j].idcard}</td>
                                     <td>￥ ${json[j].balance}</td>
                                     
                                     <td>
                                         <div class="button-group">
                                             <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                     class="icon-edit"></span>修改</a>
                                             <a class="button border-red" href="javascript:void(0)"
                                                 onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                                 删除</a>
                                         </div>
                                     </td>
                                 </tr>
                                 `
                            } else {
                                info +=
                                    `
                                 <tr>
                                     <td>${json[j].id}</td>
                                     <td><span class="badge bg-gray">非会员</span></td>
                                     <td>${json[j].username}</td>
                                     <td>${json[j].pwd}</td>
                                     <td>${json[j].idcard}</td>
                                     <td>￥ ${json[j].balance}</td>
                                     
                                     <td>
                                         <div class="button-group">
                                             <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                     class="icon-edit"></span>修改</a>
                                             <a class="button border-red" href="javascript:void(0)"
                                                 onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                                 删除</a>
                                         </div>
                                     </td>
                                 </tr>
                                 `
                            }

                        }
                        $('#tablebody').html(info);
                    }
                },
                error: function (err) {
                    console.log('err', err)
                }
            })
        }

        function del(id) {
            if (confirm("您确定要删除吗?")) {
                $.ajax({
                    url: 'http://127.0.0.1:3000/api/user/deluser',
                    dataType: 'jsonp',
                    type: 'get',
                    data: {
                        id
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            var str =
                                `
                                    <div class="alert alert-blue">
                                        <span class="close rotate-hover"></span><strong>恭喜：</strong>${data.msg}
                                    </div>
                                `
                            $('#info').html(str)
                            setTimeout(function () {
                                $('#info').html('')
                            }, 2000)
                            listonLoad();
                        } else {
                            var str =
                                `
                                    <div class="alert alert-red">
                                        <span class="close rotate-hover"></span><strong>错误：</strong>服务器500。
                                    </div>
                                `
                            $('#info').html(str)
                            setTimeout(function () {
                                $('#info').html('')
                            }, 2000)
                        }
                    },
                    error: function (err) {
                        console.log('err', err)
                    }
                })
            }
        }
        var oldvalue = '';
        $('#kindwine').mouseleave(function () {
            var Newvalue = document.getElementById('kindwine').value;
            if (Newvalue == '') {
                return;
            }
            var text = document.getElementById('kindwine').children[Newvalue].innerText;
            if (Newvalue == oldvalue) {
                oldvalue = Newvalue
                return;
            } else {
                oldvalue = Newvalue;
                console.log(oldvalue)
                $.ajax({
                    url: 'http://localhost:3000/api/user/selectoneuser',
                    dataType: 'jsonp',
                    type: 'get',
                    data: {
                        kindid: oldvalue
                    },
                    // jsonpCallback: 'callback',
                    success: function (data) {

                        if (data != null) {
                            console.log(data)
                            json = data.result;
                            // var arr = json.data;
                            console.log(json)
                            var pageNum = document.getElementById('pageNum');
                            var code = '';
                            var pageTotal = json.length / 4;
                            for (let i = 0; i < pageTotal; i++) {
                                if (i == 0) {
                                    code +=
                                        `<span class="current" onclick="pageClick(this)">${i + 1}</span>`
                                } else {
                                    code +=
                                        `<span class="" onclick="pageClick(this)">${i + 1}</span>`
                                }
                            }
                            pageNum.innerHTML = code;
                            let info = '';
                            var long = json.length > 4 ? 4 : json.length;
                            for (let j = 0; j < long; j++) {
                                if (json[j].ismember == 1) {
                                    info +=
                                        `
                                 <tr>
                                     <td>${json[j].id}</td>
                                     <td><span class="badge bg-main">VIP会员</span></td>
                                     <td>${json[j].username}</td>
                                     <td>${json[j].pwd}</td>
                                     <td>${json[j].idcard}</td>
                                     <td>￥ ${json[j].balance}</td>
                                     
                                     <td>
                                         <div class="button-group">
                                             <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                     class="icon-edit"></span>修改</a>
                                             <a class="button border-red" href="javascript:void(0)"
                                                 onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                                 删除</a>
                                         </div>
                                     </td>
                                 </tr>
                                 `
                                } else {
                                    info +=
                                        `
                                 <tr>
                                     <td>${json[j].id}</td>
                                     <td><span class="badge bg-gray">非会员</span></td>
                                     <td>${json[j].username}</td>
                                     <td>${json[j].pwd}</td>
                                     <td>${json[j].idcard}</td>
                                     <td>￥ ${json[j].balance}</td>
                                     
                                     <td>
                                         <div class="button-group">
                                             <a class="button border-green" href="./update.html?id=${json[j].id}" id="btn"><span
                                                     class="icon-edit"></span>修改</a>
                                             <a class="button border-red" href="javascript:void(0)"
                                                 onclick="return del(${json[j].id})"><span class="icon-trash-o"></span>
                                                 删除</a>
                                         </div>
                                     </td>
                                 </tr>
                                 `
                                }
                            }
                            $('#tablebody').html(info);
                        } else {
                            alert('遇到错误！可能是网络原因！');
                        }
                    },
                    error: function (err) {
                        console.log('err', err)
                    }
                })
            }
        });
        $("#checkall").click(function () {
            $("input[name='id[]']").each(function () {
                if (this.checked) {
                    this.checked = false;
                } else {
                    this.checked = true;
                }
            });
        })

        function DelSelect() {
            var Checkbox = false;
            $("input[name='id[]']").each(function () {
                if (this.checked == true) {
                    Checkbox = true;
                }
            });
            if (Checkbox) {
                var t = confirm("您确认要删除选中的内容吗？");
                if (t == false) return false;
            } else {
                alert("请选择您要删除的内容!");
                return false;
            }
        }


    </script>
</body>

</html>